<%@ page contentType="text/html;charset=utf-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>便民服务平台3.0</title>
    <link rel="stylesheet" href="<c:url value='/resource/css/bootstrap.css'/>">
    <link rel="stylesheet" href="<c:url value='/resource/css/darktooltip.css'/>">
    <link rel="stylesheet" href="<c:url value='/resource/css/animate.min.css'/>">
    <link rel="stylesheet" href="<c:url value='/resource/css/style.css'/>">
    <link rel="stylesheet" href="<c:url value='/resource/js/app/jquery-validation/1.11.0/jquery.validate.css'/>">
</head>

<body>
<jsp:include page="../include/header.jsp"/>

<script src="<c:url value='/resource/js/lib/template.js'/>"></script>
<script src="<c:url value='/resource/js/lib/jqPaginator.js?v2.1'/>"></script>


<style type="text/css">
    .td_middle {
        vertical-align: middle !important;
    }
</style>


<div class="main-container">
    <div class="mc-hd">
        <p class="app-t">queryCenter</p>
        <h1 class="app-h1">专注高端”互联网+政务”设计</h1>
        <div class="type-wrap">
            <h2 class="typedH2">慧眼看世界，在政务服务的路上不断追求创新！</h2>
        </div>
    </div>
    <div class="mc-bd">

        <div class="container">
            <ol class="breadcrumb">
                <li><a href="<c:url value="/interacts"></c:url>">应用中心</a></li>
                <li class="active">12389</li>
            </ol>
            <div class="row">
                <div class="col-sm-12">
                    <div class="mccc-right">
                        <h2>黑龙江省公安厅举报中心（12389）互联网举报投诉服务专栏</h2>
                        <form class="mcr-report" id="inputForm" method="post"
                              action="<c:url value="/interacts/post12389"></c:url>">
                            <h3>举报人信息</h3>
                            <div class="mcr-report-box">
                                <div class="form-inline">
                                    <div class="form-group">
                                        <label><span class="text-red">*</span>举报人姓名：</label>
                                        <input type="text" class="form-control" id="txtComplaintusername"
                                               readonly="readonly" value="${current_member.realName}">
                                        <input type="hidden" class="form-control" id="hidComplaintusername"
                                               name="complaintusername" value="${current_member.realName}">
                                        <input type="hidden" class="form-control" id="hidCreater"
                                               name="creater" value="${current_member.guid}">
                                        <%--<input type="hidden" class="form-control" id="hidCGuid" name="guid"--%>
                                        <%--value="${uuid}">--%>
                                        <input type="hidden" class="form-control" id="hidAttIds" name="attids">
                                    </div>
                                    <div class="form-group">
                                        <label><span class="text-red">*</span>身份证号：</label>
                                        <input type="text" class="form-control" id="txtComplaintidcode"
                                               readonly="readonly" value="${current_member.idNum}">
                                        <input type="hidden" class="form-control" id="hidComplaintidcode"
                                               name="complaintidcode" value="${current_member.idNum}">
                                    </div>
                                    <div class="form-group">
                                        <label><span class="text-red">*</span>联系方式：</label>
                                        <input type="text" class="form-control" id="txtComplaintmobile"
                                               readonly="readonly" value="${current_member.telephone}">
                                        <input type="hidden" class="form-control" id="hidComplaintmobile"
                                               name="complaintmobile" value="${current_member.telephone}">
                                    </div>
                                    <div class="form-group">
                                        <label><span class="text-red">*</span>电子邮件：</label>
                                        <input type="text" class="form-control" id="complaintemail"
                                               name="complaintemail">
                                    </div>
                                    <div class="form-group">
                                        <label>住址及邮编：</label>
                                        <input type="text" class="form-control" id="complaintaddress"
                                               name="complaintaddress">
                                    </div>
                                </div>
                                <div class="report-tabs">
                                    <input type="hidden" id="cctype" name="cctype">
                                    <ul class="report-tab-hd">
                                        <li class="active">被举报人信息</li>
                                        <li>被举报单位信息</li>
                                    </ul>
                                    <div class="report-tab-bd">
                                        <div class="form-inline formatLabel-110">
                                            <div class="form-group">
                                                <label><span class="text-red">*</span>被举报人姓名：</label>
                                                <input type="text" class="form-control required"
                                                       id="becomplaint1username" name="becomplaint1username">
                                            </div>
                                            <div class="form-group">
                                                <label>警号：</label>
                                                <input type="text" class="form-control" id="becomplaint1policeno"
                                                       name="becomplaint1policeno">
                                            </div>
                                            <div class="form-group">
                                                <label><span class="text-red">*</span>被举报人单位：</label>
                                                <input type="text" class="form-control" id="becomplaint1unitname"
                                                       name="becomplaint1unitname">
                                            </div>
                                            <div class="form-group">
                                                <label>人数：</label>
                                                <input type="text" class="form-control" id="becomplaint1count"
                                                       name="becomplaint1count">
                                            </div>
                                            <div class="form-group">
                                                <label><span class="text-red">*</span>举报发生时间：</label>
                                                <select class="form-control" id="becomplaint1period"
                                                        name="becomplaint1period">
                                                    <script id="template_policeperiod_1" type="text/html">
                                                        <option value="">--请选择--</option>
                                                        {{each data as d i}}
                                                        <option value="{{d.val}}">{{d.title}}</option>
                                                        {{/each}}
                                                    </script>
                                                </select>
                                            </div>
                                            <div class="form-group">
                                                <label>职务：</label>
                                                <input type="text" class="form-control" id="becomplaint1position"
                                                       name="becomplaint1position">
                                            </div>

                                            <div class="form-group">
                                                <label><span class="text-red">*</span>警种：</label>
                                                <select class="form-control" id="becomplaint1policetype"
                                                        name="becomplaint1policetype">
                                                    <script id="template_policetype_1" type="text/html">
                                                        <option value="">--请选择--</option>
                                                        {{each data as d i}}
                                                        <option value="{{d.id}}">{{d.value}}</option>
                                                        {{/each}}
                                                    </script>

                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-inline formatLabel-110" style="display: none;">
                                            <div class="form-group">
                                                <label><span class="text-red">*</span>单位：</label>
                                                <input type="text" class="form-control required"
                                                       id="becomplaint2unitname" name="becomplaint2unitname">
                                            </div>
                                            <div class="form-group">
                                                <label><span class="text-red">*</span>举报发生时间：</label>
                                                <select class="form-control" id="becomplaint2period"
                                                        name="becomplaint2period">
                                                    <script id="template_policeperiod_2" type="text/html">
                                                        <option value="">--请选择--</option>
                                                        {{each data as d i}}
                                                        <option value="{{d.val}}">{{d.title}}</option>
                                                        {{/each}}
                                                    </script>
                                                </select>
                                            </div>
                                            <div class="form-group">
                                                <label><span class="text-red">*</span>警种：</label>
                                                <select class="form-control" id="becomplaint2policetype"
                                                        name="becomplaint2policetype">
                                                    <script id="template_policetype_2" type="text/html">
                                                        <option value="">请选择</option>
                                                        {{each data as d i}}
                                                        <option value="{{d.id}}">{{d.value}}</option>
                                                        {{/each}}
                                                    </script>
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <h3>举报内容</h3>
                            <div class="mcr-report-box">
                                <div class="form-inline">
                                    <div class="form-group">
                                        <label><span class="text-red">*</span>事项名称：</label>
                                        <input type="text" class="form-control" id="complainttitle"
                                               name="complainttitle">
                                    </div>
                                    <div class="form-group">
                                        <label><span class="text-red">*</span>举报事项发生日期：</label>
                                        <input type="text" class="form-control laydate-icon" id="complaintudatetime"
                                               name="complaintudatetime">
                                    </div>
                                    <div class="form-group report-textarea-group">
                                        <label><span class="text-red">*</span>举报事项内容：</label>
                                        <textarea class="form-control" rows="10" id="complaintcontent"
                                                  name="complaintcontent"></textarea>
                                        <p>(您还可以输入<span id="complaintcontent_count" style="color:red">800</span>个字)</p>
                                    </div>
                                    <div class="form-group">
                                        <label>附件上传：</label>

                                        <a id="btnuploadfile" href="javascript:void(0);" class="file_a"
                                           onclick="applyfileupload('fileUpload');">

                                            <i></i>上传附件
                                            <input id="fileUpload" name="materialFile" type="file" value="">

                                        </a>
                                        <span id="span_process" style="color:#f00"></span>
                                        <div id="progressbar" style="display:none;margin-left:144px;margin-top:2px;width:110px;height: 5px;"></div>
                                        <div id="temp12389atts">
                                            <script id="template_12389_att" type="text/html">

                                                <div class="attach" id="div_{{attid}}">
                                                    {{sourcename}}
                                                    <a href="javascript:void(0);" class="delete"
                                                       onclick="delAtt('{{attid}}')"></a>
                                                </div>


                                            </script>
                                        </div>


                                    </div>
                                </div>
                            </div>
                            <div class="btn-box">
                                <input type="submit" class="btn btn-lg btn-yellow" id="btnSubmit" value="提交信息"/>
                            </div>
                        </form>


                    </div>
                </div>

            </div>
        </div>

    </div>
</div>

<div class="modal fade" id="myModal-report">
    <div class="modal-dialog modal-md">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">提示</h4>
            </div>
            <div class="modal-body">
                <div class="mb-text">
                    <i class="glyphicon glyphicon-ok text-green"></i>
                    <%--<i class="glyphicon glyphicon-remove text-red"></i>--%>
                    <h3>提交成功,我们尽快会为你处理,系统将自动跳转至个人中心。</h3>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>

<jsp:include page="../include/footer.jsp"/>


<script src="<c:url value='/resource/js/app/laydate/laydate.js'/>"></script>
<script src="<c:url value='/resource/js/lib/jquery-ui.min.js'/>"></script>
<link rel="stylesheet" href="<c:url value='/resource/css/jquery-ui.min.css'/>">

<script type="text/javascript">

    $(function () {

        //绑定警种下拉框
        loadPolicType("becomplaint1policetype", "template_policetype_1");
        loadPolicType("becomplaint2policetype", "template_policetype_2");

        //绑定举报时间下拉框
        loadCPeriod();

        //注册提交事件
        $('#btnSubmit').click(function () {
            //console.log("btnSubmit");
            //console.log($('#inputForm').valid());
            //return false;
            //遍历附件列表
            $('#hidAttIds').val("");
            var attIds = "";
            $('#temp12389atts').find("div").each(function () {

                if (attIds == "") {
                    attIds = $(this).attr("id").replace("div_", "");
                }
                else {
                    attIds += "," + $(this).attr("id").replace("div_", "");
                }
            });
            $('#hidAttIds').val(attIds);
            //console.log(attIds);

            if ($('#inputForm').valid()) {
                $.ajax({
                    url: '<c:url value="/interacts/post12389"></c:url>',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify($('#inputForm').serializeObject()),
                    dataType: 'json',

                    success: function (data) {
                        //console.log(data);
                        $('#myModal-report').on('hidden.bs.modal', function () {
                            <%--self.location.href = '<c:url value="/usercenter/index"></c:url>';--%>
                            self.location.href = '<c:url value="/interacts/goto"></c:url>?gotoUrl=' + encodeURI('<c:url value="/usercenter/index"></c:url>');
                        })
                        $('#myModal-report').modal();
                    },
                    error: function (data) {
                        //alert("提交失败");
                    }
                });
            }
            return false;
        });


    })

    /**
     * 警种下拉框加载
     * @param id
     */
    function loadPolicType(containerId, templateId) {

        $.ajax({
            type: 'get',
            url: "<c:url value="/matters/pccs"></c:url>",
            success: function (resp) {
                resp = eval(resp);
                var shtml = template(templateId, resp);
                $("#" + containerId).html(shtml);
            },
            error: function (resp) {

                console.log(resp);
            }
        });

    }


    /**
     * 举报时间加载
     * @param id
     */
    function loadCPeriod() {

        $.ajax({
            type: 'get',
            url: "<c:url value="/matters/dicts/"></c:url>" + encodeURIComponent(encodeURI("complaint.period")),
            success: function (resp) {
                resp = eval(resp);
                var shtml1 = template("template_policeperiod_1", resp);
                $("#becomplaint1period").html(shtml1);

                var shtml2 = template("template_policeperiod_2", resp);
                $("#becomplaint2period").html(shtml2);
            },
            error: function (resp) {

                console.log(resp);
            }
        });

    }


    function delAtt(attid) {
        $.ajax({
            type: 'DELETE',
            url: "<c:url value="/interacts/12389/att/"/>" + attid,
            success: function (resp) {
                //console.log(resp);
                $('#div_' + resp.data).remove();
            },
            error: function (resp) {
                console.log(resp);
            }
        });
    }

    /**
     * 上传附件
     * @param manifestGuid
     */
    function applyfileupload(manifestGuid) {
        //alert(manifestGuid);
        $("#" + manifestGuid).fileupload({
            url: '<c:url value="/interacts/12389/att"/>',
            dataType: 'json',
            done: function (e, d) {

                resp = eval(d.result.data);
                var shtml = template("template_12389_att", resp.data);
                $("#temp12389atts").append(shtml);

                $('#span_process').text("");

                $("#progressbar").css("display", "none");
            },
            fail: function (e, d) {
                console.log(d);
                $("#progressbar").css("display", "none");
            },
            progress: function (e, data) {
                console.log(toDecimal(data.loaded / data.total * 100));

                $("#progressbar").css("display", "block");
                /* 进度条样式设定 */
                $('#progressbar').css("border", "0px");
                $('#progressbar').children().first().css("background-color", "#00233f");
                $('#progressbar').children().first().css("margin", "0px");

                $("#progressbar").progressbar({
                    value: toDecimal(data.loaded / data.total * 100)
                });

                $('#span_process').text("文件上传中，当前进度：" + toDecimal(data.loaded / data.total * 100) + "%");

                if (data.loaded == data.total) {
                    $('#span_process').text("上传完成，正则加载列表...");
                }
            }
        });
    }

    //保留两位小数
    //功能：将浮点数四舍五入，取小数点后2位
    function toDecimal(x) {
        var f = parseFloat(x);
        if (isNaN(f)) {
            return;
        }
        f = Math.round(x * 100) / 100;
        return f;
    }
</script>
<script src="<c:url value='/resource/js/require.js'/>" data-main="<c:url value='/resource/js/main.js'/>"
        id="current-page" current-page="appCenter"></script>
</body>
</html>
